<template>
    <view
        :style="'background-repeat: no-repeat;' + 'background-image:url(' + getImgOssUrl('/ui-prod-2.4.0/bg.png') + ')'"
        class="bg"
        @touchstart="itemTouchStart($event)"
        @touchend="itemTouchEnd($event)">
        <view class="line space" :style="{ transform: `translateX(${offsetX}rpx)` }">
            <view v-for="(item, index) in memberData" :key="index" style="display: inline-block">
                <!-- v-if="scrollNum == index || scrollNum + 1 == index" -->
                <view
                    :class="[scrollNum == index ? 'cur' : 'size', 'between', 'item']"
                    :style="
                        'background-repeat: no-repeat;' +
                        'background-image:url(' +
                        getImgOssUrl('/ui-prod-2.4.0/card.png') +
                        ')'
                    ">
                    <view :class="[scrollNum == index ? '' : 'next', 'level']">
                        <view class="row"
                            ><text class="title">{{ item.memberLevelName }}</text
                            ><text class="numlevel" v-if="current == index">当前等级</text></view
                        >
                        <view class="numlevel bottom" v-if="memberData.length == 1">
                            <text style="padding-right: 11rpx">成长值</text>
                            <text class="black">{{ pageParam.currentNum }}</text>
                            <view style="padding-right: 20rpx" @click="jumpTo(index)" v-if="current == index">
                                <img :src="getImgOssUrl('/ui-prod-2.4.0/jiantou_right.png')" class="jiantou" />
                            </view>
                        </view>
                        <view class="numlevel bottom" v-else>
                            <text style="padding-right: 11rpx">成长值</text>
                            <text class="black" v-if="current == index">{{ pageParam.currentNum }}</text>
                            <text v-if="current == index && index < memberData.length - 1">/</text>
                            <text v-if="current == index && index < memberData.length - 1">{{
                                memberData[index + 1].memberUplevelCondition - 1
                            }}</text>
                            <text v-if="!index && current != 0">0</text>
                            <text v-if="index < memberData.length - 1 && current != index && index">{{
                                memberData[index].memberUplevelCondition
                            }}</text>
                            <text v-if="index == memberData.length - 1 && current != index">
                                {{ item.memberUplevelCondition }}
                            </text>
                            <view style="padding-right: 20rpx" @click="jumpTo(index)" v-if="current == index">
                                <img :src="getImgOssUrl('/ui-prod-2.4.0/jiantou_right.png')" class="jiantou" />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- 滑动切换tab -->
    <view class="superme-normal-member" @touchstart="itemTouchStart($event)" @touchend="itemTouchEnd($event)">
        <view class="member-swiper">
            <view :style="{ transform: `translateX(${transformX}rpx)` }" class="line">
                <view ref="memberItem" class="item" v-if="memberData.length">
                    <view class="levelright content" v-if="memberData[scrollNum].memberPriorityList.length">
                        <view class="tag"><view class="begin"></view><view class="text">等级权益</view></view>
                        <view class="detail" style="padding: 29rpx 0rpx 32rpx 0rpx">
                            <view
                                class="last"
                                v-for="(item, index) in memberData[scrollNum].memberPriorityList"
                                :key="index"
                                @click="jump(item)">
                                <img :src="item.priorityIcon || getImgOssUrl('/ui-prod-2.4.0/code.png')" class="icon" />
                                <view class="title">{{ item.priorityOuterName }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="target content" v-if="pageParam.levelList.growthRuleSwitch != 2">
                        <view class="tag"> <view class="begin"></view><view class="text">成长任务</view> </view>
                        <view class="detail growcontent" style="justify-content: space-between">
                            <view class="outside">
                                <img :src="getImgOssUrl('/ui-prod-2.4.0/code.png')" class="icon" />
                                <view class="righttext">
                                    <text class="pro">购买商品</text>
                                    <text class="tips"
                                        >每消费{{
                                            pageParam.levelFollow == 2
                                                ? pageParam.levelList.money
                                                : pageParam.levelList.money / 100
                                        }}元，获得{{ pageParam.levelList.points }}成长值</text
                                    >
                                </view>
                            </view>
                            <button class="btn" @click="router.switchTab({ url: '/pages/tabbar/home' })">去购买</button>
                        </view>
                    </view>
                    <view class="table content">
                        <view class="tag"><view class="begin"></view><view class="text">会员等级对照表</view></view>
                        <view class="detail growcontent head">
                            <text class="left">等级</text>
                            <text class="right">所需成长值</text>
                        </view>
                        <view class="detail growcontent tr" v-for="(item, index) in memberData" :key="index">
                            <text class="left">{{ item.memberLevelName }}</text>
                            <text class="right" v-if="index < memberData.length - 1"
                                >{{ memberData[index].memberUplevelCondition }}-{{
                                    memberData[index + 1].memberUplevelCondition - 1
                                }}</text
                            >
                            <text class="right" v-if="index == memberData.length - 1"
                                >{{ item.memberUplevelCondition }}
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <uni-popup ref="popup">
        <view class="popup">
            <view class="dialog">
                <img :src="priority.priorityIcon || getImgOssUrl('/ui-prod-2.4.0/code.png')" class="logo" />
                <view class="name">{{ priority.priorityOuterName }}</view>
            </view>
            <view class="desc">{{ priority.priorityBrief }}</view>
            <img :src="getImgOssUrl('/ui-prod-2.4.0/cancel.png')" class="cancel" @click="popup.close()" />
        </view>
    </uni-popup>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import request from '@/request';
import storage from '@/commons/storage';
import { getImgOssUrl } from '@/commons/utils.js';
import router from '@/router';
let startX = ref(0);
let scrollNum = ref(0);
let arr = ref([1, 2, 3]);
let transformX = ref(0);
let offsetX = ref(0);
let popup = ref();
let isshow = ref(false);
let priority = reactive({});
let memberData = ref([]);
let current = ref();
const pageParam = reactive({ current: [], currentNum: 1, levelList: {}, levelFollow: 1 });
onShow(async () => {
    getData();
});
const jump = async data => {
    const res = await request('priority', { id: data.priorityId });
    Object.assign(priority, res.data);
    popup.value.open('center');
};
const itemTouchStart = (e, i) => {
    startX.value = e.changedTouches[0].pageX;
};
const jumpTo = index => {
    if (index == memberData.value.length - 1) {
        router.push(
            '/pages-user/member/detail?id=' + memberData.value[index].id + '&islast=1' + '&num=' + pageParam.currentNum
        );
    } else {
        router.push(
            '/pages-user/member/detail?id=' +
                memberData.value[index].id +
                '&num=' +
                pageParam.currentNum +
                '&all=' +
                memberData.value[index + 1].memberUplevelCondition +
                '&islast=0' +
                '&nextName=' +
                memberData.value[index + 1].memberLevelName
        );
    }
};
const itemTouchEnd = (e, i) => {
    let endx = e.changedTouches[0].pageX - startX.value;
    if (endx < -20) {
        if (scrollNum.value >= memberData.value.length - 1) return;
        scrollNum.value++;
        // transformX.value -= 750;
        offsetX.value -= 649;
    }
    if (endx > 20) {
        if (!scrollNum.value) return;
        scrollNum.value--;
        // transformX.value += 750;
        offsetX.value += 649;
    }
};
const getData = async () => {
    const currentDetail = await request('management', { openKid: storage.get('openKid'), appType: 1 });
    pageParam.levelFollow = currentDetail.data.levelFollow;
    pageParam.current = currentDetail.data;
    if (pageParam.levelFollow == 2) {
        sCrmMemberInfo();
    } else {
        const vipList = await request('levelList', { appType: 1, switch: 1 });
        const levelList = await request('levelRule');
        memberData.value = vipList.data;
        pageParam.levelList = levelList.data;
        memberData.value.forEach((item, index) => {
            if (item.id == pageParam.current.levelId) {
                scrollNum.value = index;
                current.value = index;
                pageParam.currentNum = pageParam.current.growthVal;
                offsetX.value = index * -649;
                // transformX.value = index * -750;
            }
        });
        isshow.value = true;
    }
};

const sCrmMemberInfo = async () => {
    let list = await request('scrmListServ', { appType: 1, switch: 1 });
    let res = await request('scrmRuleServ');
    memberData.value = list.data;
    pageParam.levelList = res.data;
    memberData.value.forEach((item, index) => {
        if (item.id == pageParam.current.levelId) {
            scrollNum.value = index;
            current.value = index;
            pageParam.currentNum = pageParam.current.growthVal;
            offsetX.value = index * -649;
        }
    });
    isshow.value = true;
};
</script>
<style lang="scss" scoped>
.bg {
    height: auto;
    background-size: contain;
    background-color: #fff;
    overflow: hidden;
}
.cur {
    margin-left: 29rpx !important;
}
.title {
    font-size: 25rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 11rpx 0;
}
.table {
    padding-bottom: 20rpx;
}
.size {
    height: 261rpx !important;
    background-size: 627rpx 261rpx !important;
}

.popup {
    position: relative;
    width: 649rpx;
    background: #ffffff;
    border-radius: 22rpx;
    box-sizing: border-box;
    padding: 45rpx 54rpx;

    .desc {
        text-align: center;
        font-size: 25rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 40rpx;
    }
    .cancel {
        width: 54rpx;
        height: 54rpx;
        position: absolute;
        transform: translate(-50%, 0);
        bottom: -97rpx;
        left: 50%;
    }
    .dialog {
        display: flex;
        flex-direction: column;
        align-items: center;
        .logo {
            width: 101rpx;
            height: 101rpx;
        }
        .name {
            margin: 29rpx 0 36rpx 0;
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 25rpx;
        }
    }
}

.between {
    margin-top: 43rpx;
    margin-left: 22rpx;
    height: 300rpx;
    background-size: 627rpx 300rpx;
    width: 627rpx !important;
    .next {
        height: 261rpx !important;
    }
    .level {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 300rpx;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 34rpx 29rpx;
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .bottom {
            display: flex;
            align-items: center;
        }

        .numlevel {
            height: 33rpx;
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 33rpx;
            .jiantou {
                margin-left: 22rpx;
                width: 11rpx;
                height: 20rpx;
            }
            .black {
                font-size: 36rpx;
                font-weight: 500;
            }
        }
        .title {
            height: 33rpx;
            font-size: 36rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 33rpx;
        }
    }
}
.line {
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: 100%;
    transition: all 0.5s;
    .item {
        display: inline-block;
        width: 750rpx;
    }
}
.superme-normal-member {
    overflow: hidden;
    background: #fff;
    .icon {
        width: 72rpx;
        height: 72rpx;
    }
    .content {
        border-bottom: 2rpx solid #f5f5f5;
        margin: 43rpx 29rpx 0 29rpx;
        &:last-child {
            border: none;
        }
        .detail {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 29rpx 0rpx 43rpx 0rpx;
            .btn {
                width: 127rpx;
                height: 54rpx;
                margin: 0;
                line-height: 54rpx;
                background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                border-radius: 27rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
            .last {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 33.3%;
            }
        }
        .growcontent {
            padding: 0;
            margin: 29rpx 0 34rpx 0;
            .outside {
                display: flex;
                align-items: center;
                .righttext {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-left: 18rpx;
                    .pro {
                        height: 25rpx;
                        font-size: 25rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 25rpx;
                        margin-bottom: 14rpx;
                    }
                    .tips {
                        height: 25rpx;
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        line-height: 25rpx;
                    }
                }
            }
        }
        .head {
            margin: 29rpx 0 0 0;
            height: 72rpx;
            background: #f6f6f6;
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 36rpx;
        }
        .left {
            flex: 1;
            text-align: center;
        }
        .right {
            flex: 2;
            text-align: center;
        }
        .tr {
            margin: 0;
            height: 72rpx;
            border-bottom: 2rpx solid #f5f5f5;
            border-left: 2rpx solid #f5f5f5;
            border-right: 2rpx solid #f5f5f5;
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 25rpx;
        }
        .tag {
            display: flex;
            align-items: center;

            .begin {
                width: 5rpx;
                height: 29rpx;
                background: #fe292b;
                border-radius: 4rpx;
            }
            .text {
                margin-left: 11rpx;
                font-size: 29rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 29rpx;
            }
        }
    }
}
</style>
